iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
Mobile Development

用Spring Boot架設後端結合Android前端建構智慧個人化推薦系統系列 第 8

Day8 利用Spring Boot整合模板引擎(Thymeleaf):實作簡易的網頁前端顯示

  • 分享至 

  • xImage
  •  

Thymeleaf作為模板引擎,可以輕鬆地創建基於伺服器的動態網頁。本文將帶您一步一步實現一個簡單的Spring Boot Web應用,並使用Thymeleaf作為模板引擎來顯示網頁。

安裝依賴

首先,需要創建一個新的Spring Boot專案。可以使用 Spring Initializr 來生成基礎專案。

選擇以下配置:

  • Project: Maven Project
  • Language: Java
  • Spring Boot: 2.5.0或以上
  • Dependencies:
  • Spring Web
  • Thymeleaf
    下載並解壓縮項目後,在IDE中打開它

如果使用Maven,確保pom.xml中已經包含Thymeleaf的依賴:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

再來建立簡單的web應用
創建一個HomeController.java控制器:

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "home"; // 返回模板名稱
    }
}

在這個控制器中,我們使用@Controller註解來標記它,並使用@GetMapping定義根路徑的請求

創建一個home.html模板文件:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>示例網頁</title>
    <meta charset="UTF-8" />
</head>
<body>
    <h1>歡迎使用Thymeleaf</h1>
    <p th:text="${message}">這是顯示的信息。</p>
</body>
</html>

在這個HTML文件中,我們使用th:text屬性來將模型中的message屬性值顯示在網頁上

應用程序類:

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

如果想要更美觀一些,可以在src/main/resources/static/css目錄中創建一個CSS文件

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

h1 {
    color: #007bff;
}

然後在home.html中引用:

<head>
    <title>示例網頁</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}" />
</head>

Thymeleaf與Spring Boot的整合使得開發動態網站變得直觀易行,這使得它成為Java中非常流行的選擇


上一篇
Day7 Spring Boot中的配置管理:如何使用application.properties/yml檔進行配置
下一篇
Day9 使用Spring Boot整合第三方服務的範例:與其他API進行合作的實作
系列文
用Spring Boot架設後端結合Android前端建構智慧個人化推薦系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言